<!--  -->
<template>
  <div style="height:100%;overflow:auto;background:#fff">
    <div style="padding:10px;display:flex;">
      <div class="pad10" @click="refreshChart">刷新</div>
      <div class="pad10" @click="changeType">
        改变数据
        <input v-model="dataType" @input="changeData" type="text" />
      </div>
      <div class="pad10" @click="changeType">
        切换类型
        <input v-model="typeId" type="text" />
      </div>
      <div class="pad10">
        标题
        <input v-model="title" type="text" />
      </div>
      <div class="pad10">
        主标题
        <input v-model="maintitle" type="text" />
      </div>
      <div class="pad10">
        是否显示数值
        <vxe-checkbox v-model="isShowValue"></vxe-checkbox>
      </div>
      <div>
        
         <ts-select v-model="position" :source="selectSource2"> </ts-select>
      </div>
      <div class="pad10">
        是否有滑块
        <vxe-checkbox v-model="isSlider"></vxe-checkbox>
      </div>
        <div class="pad10">
        是否有点
        <vxe-checkbox v-model="point"></vxe-checkbox>
      </div>
        <div class="pad10">
        是否平滑
        <vxe-checkbox v-model="smooth"></vxe-checkbox>
      </div>
      <div @click="changeTheme">改变主题
        <ts-select v-model="themeCode" :source="selectSource"> </ts-select>
      </div>
    </div>

    <div class="chartbox" style="background:#000">
      <ts-g2-plot
        theme="dark"
        :smooth="smooth"
        :point="point"
        :maintitle="maintitle"
        :title="title"
         :themeCode="themeCode"
        :isSlider="isSlider"
        :isShowValue="isShowValue"
        :chartType="typeId"
        :data="realData"
      ></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="柱状图type2" :position="position" :isShowValue="isShowValue" :themeColor="themeColor" :themeCode="themeCode" :isPercent="true" title="表名称" chartType="2" :data="data1"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="条形图type3"  title="表名称" chartType="3" :data="data1"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="面积折线图type4" title="表名称" chartType="4" :data="data1"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="饼图type5" :isShowValue="isShowValue" title="表名称" chartType="5" :data="data4" legendPos="right"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="水滴图type6" title="表名称" chartType="6" :data="data2"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="普通仪表盘type7" title="表名称" :maxNumber="200" chartType="7" :data="data2"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="柱线混合图type8" title="表名称" chartType="8" :data="data3" ></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="雷达图type9" title="表名称" chartType="9" :data="data1"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="梯形图type10" title="表名称" chartType="10" :data="data3"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="子弹图type11" title="表名称" chartType="11" :data="data2"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="玉珏图type12" title="表名称" chartType="12" :data="data4"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="饼环图type13" title="表名称" :isShowValue="isShowValue" chartType="13" :data="data4"></ts-g2-plot>
    </div>
      <div class="chartbox">
      <ts-g2-plot maintitle="渐变仪表盘type14" title="表名称" :maxNumber="200"  chartType="14" :data="data2"></ts-g2-plot>
    </div>
         <div class="chartbox">
      <ts-g2-plot maintitle="迷你进度图样式type15" title="表名称" chartType="15" :data="data2"></ts-g2-plot>
    </div>
          <div class="chartbox">
      <ts-g2-plot maintitle="迷你进度图type16" title="表名称" chartType="16" :data="data2"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="堆叠柱状图type17" :isPercent="true" title="表名称" chartType="17" :data="data1"></ts-g2-plot>
    </div>
    <div class="chartbox">
      <ts-g2-plot maintitle="对称条形图type18" :isPercent="true" title="表名称" chartType="18" :data="data3"></ts-g2-plot>
    </div>
      <div class="chartbox">
      <ts-g2-plot maintitle="基础矩形树图type19"  title="表名称" chartType="19" :data="data4"></ts-g2-plot>
    </div>
      <div class="chartbox">
      <ts-g2-plot maintitle="词云图type20"  title="词云图" chartType="20" :data="data4"></ts-g2-plot>
    </div>
      <div class="chartbox">
      <ts-g2-plot  :smooth="true" :point="true" title="" chartType="21" :data="data3"></ts-g2-plot>
    </div>
        <div class="chartbox">
      <ts-g2-plot maintitle="迷你折线type22"  :smooth="true" title="表名称" chartType="22" :data="realData"></ts-g2-plot>
    </div>
      <div class="chartbox">
      <ts-g2-plot maintitle="迷你面积type23" :smooth="true"  title="表名称" chartType="23" :data="realData"></ts-g2-plot>
    </div>
               <div class="chartbox">
      <ts-g2-plot maintitle="迷你柱状type24"  :smooth="true" title="表名称" chartType="24" :data="realData"></ts-g2-plot>
    </div>
      <div class="chartbox">
      <ts-g2-plot maintitle="迷你进度type25" :smooth="true"  title="表名称" chartType="25" :data="data2"></ts-g2-plot>
    </div>
        <div class="chartbox">
      <ts-g2-plot maintitle="热力图"   title="表名称" chartType="26" :data="data3"></ts-g2-plot>
    </div>
    <!-- class="chartbox"dth: 50%;float:left;"></div>
     <div id="container2" style="height: 50%; width: 50%;float:left;"></div>
      <div id="container4" style="height: 50%; width: 50%;float:left;"></div>
    <div id="container5" style="height: 50%; width: 50%;float:left;"></div>-->
    <!-- <div id="container6" style="height: 50%; width: 50%;float:left;"></div> -->
  </div>
</template>

<script>
import { category } from '@antv/g2plot'
import { Line } from '@antv/g2plot'
import { Bar } from '@antv/g2plot'
import { Area } from '@antv/g2plot'
import { Pie, Liquid } from '@antv/g2plot'
import { DualAxes } from '@antv/g2plot'
export default {
  data() {
    return {
      themeCode:'4',
      position:'top',
      selectSource2:{
        dataType:'local',
        data:[
          {
          name:'top',
          value:'top',
        },
          {
          name:'middle',
          value:'middle',
        },
          {
          name:'bottom',
          value:'bottom',
        },
        ],
          code: 'value',
        text: 'name',
        value: {
          code: '',
          name: ''
        }
      },
      selectSource:{
        dataType: 'local',
        data: [
        {
        name:'默认主题',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#5B8FF9", "paletteQualitative10": ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#7262fd", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"], "paletteQualitative20": ["#5B8FF9", "#CDDDFD", "#61DDAA", "#CDF3E4", "#65789B", "#CED4DE", "#F6BD16", "#FCEBB9", "#7262fd", "#D3CEFD", "#78D3F8", "#D3EEF9", "#9661BC", "#DECFEA", "#F6903D", "#FFE0C7", "#008685", "#BBDEDE", "#F08BB4", "#FFE0ED"] } } },
        themeCode:'0'

      },
          {
        name:'秋意橙主题',
        themeColor:{ "theme": 
        { "styleSheet": 
        { "brandColor": "#FF6B3B", 
        "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"],
        "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] } } },
        themeCode:'1'

      },
          {
        name:'马卡龙主题',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#025DF4", "paletteQualitative10": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF"], "paletteQualitative20": ["#025DF4", "#DB6BCF", "#2498D1", "#BBBDE6", "#4045B2", "#21A97A", "#FF745A", "#007E99", "#FFA8A8", "#2391FF", "#FFC328", "#A0DC2C", "#946DFF", "#626681", "#EB4185", "#CD8150", "#36BCCB", "#327039", "#803488", "#83BC99"] } } },
        themeCode:'2'

      },
          {
        name:'强对比主题',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#FF4500", "paletteQualitative10": ["#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#B40F0F", "#2FB8FC", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26"], "paletteQualitative20": ["#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#B40F0F", "#2FB8FC", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26", "#946DFF", "#6C3E00", "#6193FF", "#FF988E", "#36BCCB", "#004988", "#FFCF9D", "#CCDC8A", "#8D00A1", "#1CC25E"] } } },
        themeCode:'3'

      },
          {
        name:'顺序色板(蓝)',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#B8E1FF", "paletteQualitative10": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"], "paletteQualitative20": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"] } } },
        themeCode:'4'
      },
      {
        name:'顺序色板(绿)',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#9DF5CA", "paletteQualitative10": ["#9DF5CA", "#61DDAA", "#42C090", "#19A576", "#008A5D", "#006F45", "#00562F", "#003E19", "#002800"], "paletteQualitative20": ["#9DF5CA", "#61DDAA", "#42C090", "#19A576", "#008A5D", "#006F45", "#00562F", "#003E19", "#002800"] } } },
        themeCode:'5'
      },
      {
        name:'发散色板',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#215B77", "paletteQualitative10": ["#215B77", "#1B9CD0", "#61C9FF", "#ABDFFF", "#EFF3DE", "#FFDE94", "#FFC741", "#D09C10", "#795B16"], "paletteQualitative20": ["#215B77", "#227BA2", "#1B9CD0", "#22BAED", "#61C9FF", "#8AD4FF", "#ABDFFF", "#C9E9FF", "#EFF3DE", "#FFE9B8", "#FFDE94", "#FFD470", "#FFC741", "#EDB40A", "#D09C10", "#A37B16", "#795B16"] } } },
        themeCode:'6'
      },
       {
        name:'发散色板2',
        themeColor:{ "theme": { "styleSheet": { "brandColor": "#014c63", "paletteQualitative10": ["#014c63", "#168575", "#0bc286", "#96dcb0", "#F2EAEA", "#FFA884", "#FF6836", "#D13808", "#7A270E"], "paletteQualitative20": ["#014c63", "#10686c", "#168575", "#16a37e", "#0bc286", "#65cf9b", "#96dcb0", "#c1e8c5", "#F2EAEA", "#FFC5AC", "#FFA884", "#FF895D", "#FF6836", "#F3470D", "#D13808", "#A4300C", "#7A270E"] } } },
        themeCode:'7'
      },
      ],
        code: 'themeCode',
        text: 'name',
        value: {
          code: '',
          name: ''
        }
      },
      point:true,
      smooth:false,
      themeColor:null,
      isShowValue: false,
      isSlider: false,
      dataType: 1,
      typeId: '1',
      maintitle: '折线图type1',
      title: '表名称',

      realData: [
        { category: '01月', column: '2021', value: 249.83 },
        { category: '02月', column: '2021', value: 1569.12 },
        { category: '03月', column: '2021', value: 4439.81 },
        { category: '04月', column: '2021', value: 6231.12 },
        { category: '05月', column: '2021', value: 6769.12 },
        { category: '06月', column: '2021', value: 939.12 },
        { category: '07月', column: '2021', value: 249.83 },
        { category: '08月', column: '2021', value: 1569.12 },
        { category: '09月', column: '2021', value: 4769.81 },
        { category: '10月', column: '2021', value: 4631.12 },
        { category: '11月', column: '2021', value: 6769.12 },
        { category: '12月', column: '2021', value: 6769.12 },
        { category: '01月', column: '2020', value: 769.12 },
        { category: '02月', column: '2020', value: 8900.51 },
        { category: '03月', column: '2020', value: 4898.45 },
        { category: '04月', column: '2020', value: 5168.92 },
        { category: '05月', column: '2020', value: 6475.68 },
        { category: '06月', column: '2020', value: 6672.69 },
        { category: '07月', column: '2020', value: 769.12 },
        { category: '08月', column: '2020', value: 1900.51 },
        { category: '09月', column: '2020', value: 8898.45 },
        { category: '10月', column: '2020', value: 3168.92 },
        { category: '11月', column: '2020', value: 5475.68 },
        { category: '12月', column: '2020', value: 4672.69 }
      ],
      data5: [],
      data2: [{ value: 100, column: '门诊增长率' }],
      data4: [
        { category: '卫生材料收入', value: 35.33, column: '' },
        { category: '门诊收入', value: 90.12, column: '' },
        { category: '化验收入', value: 30.42, column: '' },
        { category: '检查收入', value: 45.42, column: '' },
        { category: '卫生收入', value: 47.33, column: '' }
      ],
      data3: [
        { category: '2019-03', value: 800, column: 'a' },
        { category: '2019-04', value: 600, column: 'a' },
        { category: '2019-05', value: 400, column: 'a' },
        { category: '2019-06', value: 380, column: 'a' },
        { category: '2019-07', value: 220, column: 'a' },
        { category: '2019-03', value: 750, column: 'b' },
        { category: '2019-04', value: 650, column: 'b' },
        { category: '2019-05', value: 450, column: 'b' },
        { category: '2019-06', value: 400, column: 'b' },
        { category: '2019-07', value: 320, column: 'b' },
        { category: '2019-03', value: 900, column: 'c' },
        { category: '2019-04', value: 600, column: 'c' },
        { category: '2019-05', value: 450, column: 'c' },
        { category: '2019-06', value: 300, column: 'c' },
        { category: '2019-07', value: 200, column: 'c' }
      ],
      data6: [
        { category: '2019-03', value: 220, column: '2' },
        { category: '2019-04', value: 220, column: '2' },
        { category: '2019-05', value: 420, column: '2' },
        { category: '2019-06', value: 220, column: '2' },
        { category: '2019-07', value: 220, column: '2' }
      ],
      data1: [
        { category: '1991', value: 35, column: '急诊' },
        { category: '1992', value: 49, column: '急诊' },
        { category: '1993', value: 35, column: '急诊' },
        { category: '1994', value: 53, column: '急诊' },
        { category: '1995', value: 49, column: '急诊' },
        { category: '1996', value: 63, column: '急诊' },
        { category: '1997', value: 73, column: '急诊' },
        { category: '1998', value: 95, column: '急诊' },
        { category: '1999', value: 63, column: '急诊' },
        { category: '1991', value: 32, column: '门诊' },
        { category: '1992', value: 44, column: '门诊' },
        { category: '1993', value: 35, column: '门诊' },
        { category: '1994', value: 52, column: '门诊' },
        { category: '1995', value: 49, column: '门诊' },
        { category: '1996', value: 69, column: '门诊' },
        { category: '1997', value: 73, column: '门诊' },
        { category: '1998', value: 99, column: '门诊' },
        { category: '1999', value: 193, column: '门诊' }
      ]
    }
  },

  components: {},

  computed: {},

  mounted() {
    this.data5 = this.realData
    // this.ininChart();
    // this.initcategory()
    // this.initBar()
    // this.initArea()
    // this.initPie()
    // this.initLiquid()
  },

  methods: {
    changeTheme(){
      this.themeColor = { 
        "theme": { "styleSheet":  { "brandColor": "#FF6B3B", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"]  }}
        }
       },
    changeType() {},
    changeData() {
      this.realData = this['data' + this.dataType]
    },
    refreshChart() {
      this.data = [
        { category: '1996', value: 63, column: '急诊' },
        { category: '1997', value: 73, column: '急诊' },
        { category: '1998', value: 95, column: '急诊' },
        { category: '1999', value: 63, column: '急诊' },
        { category: '1991', value: 32, column: '门诊' },
        { category: '1992', value: 44, column: '门诊' },
        { category: '1993', value: 35, column: '门诊' },
        { category: '1994', value: 52, column: '门诊' },
        { category: '1995', value: 49, column: '门诊' },
        { category: '1996', value: 69, column: '门诊' },
        { category: '1997', value: 73, column: '门诊' },
        { category: '1998', value: 99, column: '门诊' },
        { category: '1999', value: 193, column: '门诊' }
      ]
    },

    ininChart() {
      
      const line = new Line('container', {
        data: this.data,
        padding: 'auto',
        xField: 'category',
        yField: 'value',
        seriesField: 'column',
        smooth: false,
        isStack: false, //分段是否累加
        xAxis: {
          // type: 'time',
        },
        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: v =>
              `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`)
          }
        },
        //显示数字
        label: {
          layout: [{ type: 'hide-overlap' }], // 隐藏重叠label
          style: {
            textAlign: 'left'
          },
          formatter: item => item.value
        },
        //图例
        legend: {
          //  top  top-lefttop-right right right-top right-bottom left left-top left-bottom bottom bottom-left bottom-right
          position: 'top-right',
          itemName: {
            style: {
              fill: '#000'
            },
            formatter: name => name
          }
        },
        // @TODO 后续会换一种动画方式
        animation: {
          animate: true
        },
        // point
        point: {
          size: 5,
          style: {
            lineWidth: 1,
            fillOpacity: 1
          },
          shape: item => {
            if (item.column === 'Cement production') {
              return 'diamond'
            }
            return 'circle'
          }
        }
      })

      line.render()
    },
    initcategory() {
      const categoryPlot = new category('container2', {
        data: this.data,
        xField: 'category',
        yField: 'value',
        seriesField: 'column',
        isGroup: true,
        label: {
          // 可手动配置 label 数据标签位置
          position: 'top', // 'top', 'bottom', 'middle'

          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            { type: 'adjust-color' }
          ]
        },
        slider: {
          start: 0,
          end: 0.5
        },
        mincategoryWidth: 10, //最小宽度
        maxcategoryWidth: 50 //最大宽度
      })
      categoryPlot.render()
    },

    initBar() {
      const bar = new Bar('container1', {
        data: this.data,
        xField: 'value',
        yField: 'category',
        seriesField: 'column',
        isGroup: true,
        legend: {
          position: 'top-left'
        },

        marginRatio: 0.1
      })

      bar.render()
    },
    initArea() {
      //面积图
      const area = new Area('container4', {
        data: this.data,
        xField: 'category',
        yField: 'value',
        seriesField: 'column',
        isGroup: true,
        xAxis: {
          range: [0, 1]
        }
      })
      area.render()
    },
    initPie() {
      const piePlot = new Pie('container5', {
        data: this.data,
        angleField: 'value',
        colorField: 'category',
        radius: 0.75,
        label: {
          type: 'inner',
          // type: 'spider',
          labelHeight: 28,
          content: '{name}\n{percentage}'
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }]
      })

      piePlot.render()
    },
    initLiquid() {
      const liquidPlot = new Liquid('container6', {
        percent: 0.3,
        outline: {
          border: 4,
          distance: 8
        },
        wave: {
          length: 128
        }
      })
      liquidPlot.render()
    },
    initDualAxes() {
      const dualAxes = new DualAxes('container6', {
        data: [uvBillData, transformData],
        xField: 'time',
        yField: ['value', 'count'],
        geometryOptions: [
          {
            geometry: 'category',
            isStack: true,
            seriesField: 'type',
            categoryWidthRatio: 0.4
          },
          {
            geometry: 'line',
            seriesField: 'name',
            lineStyle: ({ name }) => {
              if (name === 'a') {
                return {
                  lineDash: [1, 4],
                  opacity: 1
                }
              }
              return {
                opacity: 0.5
              }
            }
          }
        ]
      })

      dualAxes.render()
    }
  }
}
</script>
<style lang='scss' scoped>
.chartbox {
  height: 50%;
  width: 50%;
  float: left;
  border: rgba(0, 0, 0, 0.1) solid 1px;
  box-shadow: 1px 2px 3px #888;
  box-sizing: border-box;
}
.pad10 {
  padding: 10px;
}
</style>
